<template>
  <div class="divBox">
    <div class="chart" id="chart3"></div>
    <el-card class="box-card">
      <el-form inline size="small" @submit.native.prevent>
        <el-form-item label="用户搜索：">
          <el-input v-model="listPram.keyWord" placeholder="请输入姓名或手机号" clearable class="selWidth" style="width: 120px"/>
        </el-form-item>
        <!--        <el-form-item label="问题类型：">-->
        <!--&lt;!&ndash;          <el-input v-model="listPram.questionType" placeholder="问题类型" clearable class="selWidth"/>&ndash;&gt;-->
        <!--          <el-select v-model="listPram.questionType" placeholder="问题类型" clearable class="selWidth">-->
        <!--            <el-option-->
        <!--              v-for="item in typeList"-->
        <!--              :key="item.id"-->
        <!--              :label="item.name"-->
        <!--              :value="item.id"-->
        <!--            />-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <el-form-item label="提交时间：">
          <el-date-picker
            v-model="listPram.selectCrtTime"
            value-format="yyyy-MM-dd" format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 220px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="受理状态：">
          <el-select v-model="listPram.status" placeholder="受理状态" clearable style="width: 120px">
            <el-option label="已驳回" value="3"/>
            <el-option label="已办结" value="2"/>
            <el-option label="待受理" value="1"/>
            <el-option label="处理中" value="4"/>
          </el-select>
        </el-form-item>
        <el-form-item label="审核状态：">
          <el-select v-model="listPram.examine" placeholder="审核状态" clearable style="width: 120px">
            <el-option label="未通过" value="2"/>
            <el-option label="已通过" value="1"/>
            <el-option label="未审核" value="0"/>
          </el-select>
        </el-form-item>
        <el-form-item label="预警情况：">
          <el-select v-model="listPram.warningStatus" placeholder="预警情况" clearable style="width: 120px">
            <el-option label="红灯" value="3"/>
            <el-option label="黄灯" value="2"/>
            <el-option label="绿灯" value="1"/>
          </el-select>
<!--          <el-select v-model="listPram.warningStatus" multiple placeholder="预警情况"  clearable style="width: 120px">-->
<!--            <el-option-->
<!--              v-for="item in options"-->
<!--              :key="item.id"-->
<!--              :label="item.value"-->
<!--              :value="item.id">-->
<!--            </el-option>-->
<!--          </el-select>-->
        </el-form-item>

        <el-form-item label="是否为有效线索：">
          <el-select v-model="listPram.clue" placeholder="线索" clearable style="width: 120px">
            <el-option label="有效线索" value="2"/>
            <el-option label="无效线索" value="1"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" size="mini" type="primary" @click="handleSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
<!--        <el-form-item class="el-form-item-align-right">-->
<!--          <el-button icon="el-icon-circle-plus" size="mini" type="primary" @click="handlerOpenEdit(0)" v-hasPermi="['admin:notice:save']">添加投诉</el-button>-->
<!--        </el-form-item>-->
      </el-form>
      <el-table :data="listData.list" class="table" v-loading="loading" size="mini" :header-cell-style=" {fontWeight:'bold',background:'#f8f8f9',color: '#515a6e',height:'40px'}" border>
        <el-table-column
          prop="id"
          label="序号"
          width="50"
        />
        <el-table-column label="受理状态" prop="statusText" min-width="50" >
          <template slot-scope="scope">
            <div style="color:#1890ff;" v-if="scope.row.status===4">处理中</div>
            <div style="color:yellowgreen;" v-if="scope.row.status===2">已办结</div>
            <div style="color:red;" v-if="scope.row.status===3">已驳回</div>
            <div style="color:#FF8D02;" v-if="scope.row.status===1">待受理</div>
          </template>
        </el-table-column>
        <el-table-column
          label="投诉人姓名及手机号"
          min-width="85"
        >
          <template slot-scope="scope">
            <span>{{scope.row.reflectorName}} | {{scope.row.reflectorMobile }} </span>
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--          label="姓名"-->
        <!--          min-width="100"-->
        <!--        >-->
        <!--          <template slot-scope="scope">-->
        <!--            <span>{{scope.row.realName   }}</span>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column label="投诉领域" prop="type" min-width="70">
          <template slot-scope="scope">
            <div class="content">{{scope.row.typeText==''?'空':scope.row.typeText}}</div>
          </template>
        </el-table-column>
<!--        <el-table-column prop="information" label="基本情况" min-width="100">-->
<!--          <template slot-scope="scope">-->
<!--            <div class="content" :class="{showMore:!scope.row.show}">{{scope.row.information | filterEmpty}}</div>-->
<!--            <span @click="showMore(scope.row,true)" v-show="!scope.row.show && scope.row.information" style="color:#0080ff;cursor:pointer;">显示更多</span>-->
<!--            <span @click="showMore(scope.row,false)" v-show="scope.row.show && scope.row.information" style="color:#0080ff;cursor:pointer;">收起</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="所属行业" min-width="60">
          <template slot-scope="scope">
            <div >{{ scope.row.industryText||'暂无' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="行业重新归类" min-width="80">
          <template slot-scope="scope">
            <div >{{scope.row.reclassifyIndustryText||'暂无'}}</div>
          </template>
        </el-table-column>
<!--        <el-table-column label="欠薪负责人姓名" min-width="80">-->
<!--          <template slot-scope="scope">-->
<!--            <span>{{scope.row.salaryName | filterEmpty}}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="单位名称" min-width="80">-->
<!--          <template slot-scope="scope">-->
<!--            <span>{{scope.row.unitName | filterEmpty}}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <!--         v-if="JavaInfo.roles === 1" -->
        <el-table-column label="欠薪时间" prop="salaryTime" min-width="60"/>

        <el-table-column label="提交时间" min-wid th="80">
          <template slot-scope="scope">
            <span>{{scope.row.createTime| filterEmpty}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="办理人"
          min-width="50"
        >
          <template slot-scope="scope">
            <span>{{scope.row.processedName| filterEmpty}}</span>
          </template>
        </el-table-column>
        <el-table-column label="处理时间" min-width="80">
          <template slot-scope="scope">
            <span>{{scope.row.processingTime| filterEmpty}}</span>
          </template>
        </el-table-column>
        <el-table-column label="预警情况" min-width="50">
          <template slot-scope="scope">
<!--              <img class="traffic-img" src="@/assets/imgs/traffic_light/red.png" alt="">-->
              <div class="traffic-img" v-if="scope.row.warningStatus===3" style="margin: 0 auto"></div>
              <div class="traffic-img1" v-if="scope.row.warningStatus===2" style="margin: 0 auto"></div>
              <div class="traffic-img2" v-if="scope.row.warningStatus===1" style="margin: 0 auto"></div>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" prop="adminId" min-width="50" >
          <template slot-scope="scope">
            <div style="color:yellowgreen;" v-if="scope.row.examine===1">已通过</div>
            <div style="color:red;" v-if="scope.row.examine===2">未通过</div>
            <div style="color:#FF8D02;" v-if="scope.row.examine===0">未审核</div>
          </template>
        </el-table-column>
        <el-table-column
          label="是否为有效线索"
          min-width="70"
        >
          <template slot-scope="scope"  v-if="checkPermi(['admin:photo:update:clue'])">
            <el-switch
              v-model="scope.row.clue"
              :active-value="2"
              :inactive-value="1"
              active-text="有效"
              inactive-text="无效"
              @change="onchangeIsShow(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="闭环状态"
          min-width="60"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.circleStatus===1">当场支付</div>
            <div v-if="scope.row.circleStatus===2">达成支付协议</div>
            <div v-if="scope.row.circleStatus===3">书面投诉立案</div>
            <div v-if="scope.row.circleStatus===4">告知其他途径</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="170" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button icon="el-icon-edit" type="primary" size="mini" @click="onDetails(scope.row.id)" v-hasPermi="['admin:photo:info']">详情</el-button>
            <el-button icon="el-icon-delete" type="danger" size="mini" @click="handlerOpenDel(scope.row)" v-hasPermi="['admin:photo:delete']">删除</el-button>
            <el-dropdown trigger="click" style="cursor: pointer;margin-left: 10px">
                  <span class="el-dropdown-link">
                    操作<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-if="checkPermi(['admin:photo:save'])">
                  <el-button icon="el-icon-set-up" type="success" size="mini" @click="setDeal(scope.row,4)" v-if="checkPermi(['admin:photo:save'])">处理</el-button>
                </el-dropdown-item>
                <el-dropdown-item v-if="checkPermi(['admin:photo:save'])">
                  <el-button icon="el-icon-set-up" type="success" size="mini" @click="setDeal(scope.row,2)" v-if="checkPermi(['admin:photo:save'])">办结</el-button>
                </el-dropdown-item>
<!--                <el-dropdown-item v-if="checkPermi(['admin:photo:save'])">-->
<!--                  <el-button icon="el-icon-set-up" type="success" size="mini" @click="setDeal(scope.row,3)" v-if="checkPermi(['admin:photo:save'])">驳回</el-button>-->
<!--                </el-dropdown-item>-->
                <el-dropdown-item  v-if="checkPermi(['admin:photo:allocation'])">
                  <el-button icon="el-icon-set-up" type="success" size="mini" @click="setDeal2(scope.row,5)"  v-if="checkPermi(['admin:photo:allocation'])">分发</el-button>
                </el-dropdown-item>
                <el-dropdown-item v-if="checkPermi(['admin:photo:examine'])">
                  <el-button icon="el-icon-s-cooperation" type="success" size="mini" @click="setDeal3(scope.row,6)"  v-if="checkPermi(['admin:photo:examine']) && (scope.row.status ==2 || scope.row.status ==3)">审理</el-button>
                </el-dropdown-item>
                <el-dropdown-item  v-if="checkPermi(['admin:photo:close'])">
                  <el-button icon="el-icon-s-help" type="success" size="mini" @click="setDeal6(scope.row,9)"  v-if="checkPermi(['admin:photo:close'])">闭环</el-button>
                </el-dropdown-item>
                <el-dropdown-item  v-if="checkPermi(['admin:photo:follow'])">
                  <el-button icon="el-icon-phone" type="success" size="mini" @click="setDeal4(scope.row,7)"  v-if="checkPermi(['admin:photo:follow'])">电话回访记录</el-button>
                </el-dropdown-item>
                <el-dropdown-item  v-if="checkPermi(['admin:photo:classify'])">
                  <el-button icon="el-icon-menu" type="success" size="mini" @click="setDeal5(scope.row,8)"  v-if="checkPermi(['admin:photo:classify'])">行业重新归类</el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="listPram.page"
        :page-sizes="constants.page.limit"
        :layout="constants.page.layout"
        :total="listData.count"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!--详情-->
    <el-dialog
      title="投诉详情"
      :visible.sync="Visible"
      width="1100px"
      v-if="id"
      :before-close="hideEditDialog">
      <edit
        ref="photoDetails"
        :id="id"
        v-if="Visible"
        :all-type-list="typeList"
        :all-term-list="termList"
        @hideEditDialog="hideEditDialog"></edit>
    </el-dialog>
    <!--添加投诉-->
    <el-dialog
      :visible.sync="editDialogConfig.visible"
      :title="editDialogConfig.isCreate === 0? '添加投诉':'编辑投诉'"
      destroy-on-close
      :close-on-click-modal="false"
      width="900px"
    >
      <list
        v-if="editDialogConfig.visible"
        :is-create="editDialogConfig.isCreate"
        :edit-data="editDialogConfig.editData"
        @hideListDialog="hideListDialog"
      />
    </el-dialog>
    <el-dialog
      title="处理"
      :visible.sync="dealDialogVisible"
      width="900px"
      :before-close="Close1">
      <el-form :model="dealDynamicValidateForm" ref="dealDynamicValidateForm" label-width="100px" class="demo-dynamic" v-loading="dealLoading">
        <el-form-item label="处理状态：" prop="status">
          <el-select v-model="dealDynamicValidateForm.status" placeholder="处理状态" clearable style="width: 100%" disabled>
            <el-option
              v-for="(item,index) in statusList"
              :key="index"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <template v-if="dealDynamicValidateForm.status==4">
          <el-form-item label="办理情况：" prop="handleRemark" :rules="[{ required: true, message: '请填办理情况', trigger: 'blur' }]">
            <el-input v-model="dealDynamicValidateForm.handleRemark" type="textarea" :rows="7" placeholder="办理情况"/>
          </el-form-item>
        </template>
<!--        <template v-if="dealDynamicValidateForm.status==3">-->
<!--          <el-form-item label="处理内容：" prop="rejectRemark" :rules="[{ required: true, message: '请填处理内容', trigger: 'blur' }]">-->
<!--            <el-input v-model="dealDynamicValidateForm.rejectRemark" type="textarea" :rows="7" placeholder="处理内容"/>-->
<!--          </el-form-item>-->
<!--        </template>-->
        <template v-if="dealDynamicValidateForm.status==2">
          <el-form-item label="办理情况：" prop="remark" :rules="[{ required: true, message: '请填办理情况', trigger: 'blur' }]">
            <el-input v-model="dealDynamicValidateForm.remark" type="textarea" :rows="7" placeholder="办理情况"/>
          </el-form-item>
        </template>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="Close1">取 消</el-button>
       <template v-if="dealDynamicValidateForm.processedId===0">
          <el-button type="primary" @click="submitDealForm('dealDynamicValidateForm')" v-if="dealDynamicValidateForm.status!==dealDynamicValidateForm.state&&dealDynamicValidateForm.state!==3&&dealDynamicValidateForm.state!==2&&dealDynamicValidateForm.adminId!==1">确 定</el-button>
       </template>
        <template v-if="dealDynamicValidateForm.processedId!==0">
          <el-button type="primary" @click="submitDealForm('dealDynamicValidateForm')" v-if="dealDynamicValidateForm.status!==dealDynamicValidateForm.state&&dealDynamicValidateForm.state!==3&&dealDynamicValidateForm.state!==2&&dealDynamicValidateForm.adminId!==1&&dealDynamicValidateForm.adminId===dealDynamicValidateForm.processedId">确 定</el-button>
       </template>
      </span>
    </el-dialog>

    <el-dialog width="50%"  v-if="dialogVisible3" :visible.sync="dialogVisible3" title="分发" :close-on-click-modal="false"
               :close-on-press-escape="false" :destroy-on-close="true"
    >
      <Edit2 ref="detail" :id="id"  :Close3="Close3"></Edit2>
      <span slot="footer" class="dialog-footer" v-if="adminUserId==null">
        <el-button type="primary" class="primary" @click="$refs.detail.distribute(id)">确 定</el-button>
      </span>
      <span slot="footer" class="dialog-footer" v-else-if="adminUserId!=null">
        <el-button type="primary" class="primary" @click="$refs.detail.distribute(id)"  :disabled="true">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog width="50%"  v-if="dialogVisible4" :visible.sync="dialogVisible4" title="审核" :close-on-click-modal="false"
               :close-on-press-escape="false" :destroy-on-close="true"
    >
      <Edit3 ref="detail" :id="id"  :Close4="Close4"></Edit3>
<!--      v-if="listData.list.examine==0"-->
      <span slot="footer" class="dialog-footer" v-if="examine==1">
        <el-button  type="primary" class="primary" @click="$refs.detail.getAdminExamineApi(id)" :disabled="examine=true">确 定</el-button>
            <!--        {{listData.list}}-->
      </span>
      <span slot="footer" class="dialog-footer" v-else-if="examine==0">
        <el-button  type="primary" class="primary" @click="$refs.detail.getAdminExamineApi(id)">确 定</el-button>
        <!--        {{listData.list}}-->
      </span>
      <span slot="footer" class="dialog-footer" v-else-if="examine==2 && status1==2">
        <el-button  type="primary" class="primary" @click="$refs.detail.getAdminExamineApi(id)">确 定</el-button>
        <!--        {{listData.list}}-->
      </span>
      <span slot="footer" class="dialog-footer" v-else-if="examine==2 && status1==3">
        <el-button  type="primary" class="primary" @click="$refs.detail.getAdminExamineApi(id)">确 定</el-button>
        <!--        {{listData.list}}-->
      </span>
      <span slot="footer" class="dialog-footer" v-else-if="examine==2 && status1==4">
        <el-button  type="primary" class="primary" @click="$refs.detail.getAdminExamineApi(id)" :disabled="examine=true">确 定</el-button>
        <!--        {{listData.list}}-->
      </span>
    </el-dialog>
    <el-dialog width="50%"  v-if="dialogVisible5" :visible.sync="dialogVisible5" :complaintId="complaintId"  title="电话回访记录" :close-on-click-modal="false"
               :close-on-press-escape="false" :destroy-on-close="true"
    >
      <Edit4 ref="detail" :id="id"  :Close5="Close5"></Edit4>
<!--      <span slot="footer" class="dialog-footer">-->
<!--        <el-button type="primary" class="primary" @click="$refs.detail.callBack(id)">确 定</el-button>-->
<!--      </span>-->
    </el-dialog>
    <el-dialog width="50%"  v-if="dialogVisible6" :visible.sync="dialogVisible6" title="所属行业重新归类" :close-on-click-modal="false"
               :close-on-press-escape="false" :destroy-on-close="true"
    >
      <Edit6 ref="detail" :id="id" :reclassifyIndustryText="reclassifyIndustryText" :Close6="Close6" ></Edit6>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" class="primary" @click="$refs.detail.classify(id,reclassifyIndustryText)">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog width="50%"  v-if="dialogVisible7" :visible.sync="dialogVisible7"  title="闭环操作" :close-on-click-modal="false"
               :close-on-press-escape="false" :destroy-on-close="true"
    >
      <Edit7 ref="detail" :id="id" :circleStatus="circleStatus" :Close7="Close7"></Edit7>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" class="primary" @click="$refs.detail.cycle(id,circleStatus)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as computerApi from '@/api/computer.js'
import * as systemSetting from '@/api/systemSetting.js'
import * as roleApi from '@/api/role.js'
import edit from './edit'
import list from './list'
import { checkPermi } from "@/utils/permission";
import * as selfUtil from "@/utils/ZBKJIutil";
import * as categoryApi from "@/api/categoryApi";
import {updateFormDep} from "@/api/user";
import {getToken} from "@/utils/auth";
import Cookies from "js-cookie";
import Edit2 from '@/views/photo/edit2.vue'
import Edit3 from '@/views/photo/edit3.vue'
import Edit4 from '@/views/photo/edit4.vue'
import Edit6 from '@/views/photo/edit6.vue'
import Edit7 from '@/views/photo/edit7.vue'
import * as systemAdminApi from '@/api/systemadmin'
import { adminExamineApi, updateClueApi } from '@/api/categoryApi'
import { viewModelApi,selectNoGreenLightListApi } from '@/api/dashboard'


export default {
  // name: "index"
  components: { edit ,list,Edit2,Edit3,Edit4,Edit6,Edit7},
  filters: {
    sexFilter(status) {
      const statusMap = {
        0: '未知',
        1: '男',
        2: '女',
        3: '保密'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      options:[{
        id:3,
        value:'红灯'
      },
      {
        id:2,
        value:'黄灯'
      },
      {
        id:1,
        value:'绿灯'
      }],
      reclassifyIndustryText:'',
      circleStatus:'',
      complaintId:0,
      adminUserId:0,
      examine:0,
      status:'',
      status1:'',
      statusList:[{value:1,name:'待受理'},{value:2,name:'已办结'},{value:3,name:'驳回'},{value:4,name:'处理'}],
      myHeaders: { "X-Token": getToken() },
      JavaInfo: JSON.parse(Cookies.get("JavaInfo")),
      isDisabled: this.$route.params.isDisabled==='1'?true:false,
      constants:this.$constants,
      loading:false,
      dealLoading:false,
      appealLoading:false,
      listData: { list: [] },
      listPram: {
        warningStatus:null,
        keyWord: '',
        status:null,
        clue:null,
        examine:null,
        selectCrtTime:[],
        selectDepId:null,
        /*departmentId: null,
        ipAddress: null,
        macAddress: null,
        personId: null,*/
        questionType:null,
        page: 1,
        limit: this.$constants.page.limit[0],
        id:null
      },
      editDialogConfig: {
        visible: false,
        isCreate: 1, // 0=创建，1=编辑
        editData: {}
      },
      typeList:[],
      termList:[],
      selectDepList:{
        list:[]
      },//超级管理员筛选派件单位列表

      id:0,
      Visible:false,

      departmentList:[],
      dialogVisible: false,//派件dialog
      dialogVisible3: false,//分发dialog
      dialogVisible4: false,//审核dialog
      dialogVisible5:false,//电话回访记录dialog
      dialogVisible6:false,//行业重新归类
      dialogVisible7: false,//闭环
      dynamicValidateForm:{
        id:0,
        depId: '',
        termId:'',
      },

      dealDialogVisible: false,//处理dialog
      dealDynamicValidateForm:{
        id:0,
        handleRemark:'',
        rejectRemark:'',
        remark:'',
        status:0,
        state:0,
        adminId:0,
        processedId:0
      },

      appealDialogVisible: false,//申诉dialog
      appealDynamicValidateForm:{
        id:0,
        content:'',
      },
    }
  },
  mounted() {
    this.initChart3()
    if(this.$route.query.filtrate==10){
      this.statisticsOrder()
    }else{
      this.handleGetPhotoList()
    }
    this.$route.query.filtrate
    // this.statisticsOrder()
    //this.initTypeList() //当前使用人员
    //this.initTermList()
    // this.handleGetSelectDepList()
  },
  methods: {
    statisticsOrder() {
      selectNoGreenLightListApi({page:0,limit:10}).then(async res => {
        //后期接口调用
        this.listData = res
      })
    },
    initChart3(){
      let myCharts = this.$echarts.init(document.getElementById('chart3'));
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid:{
          top:30,
          left:60,
          right:10,
          bottom:90
        },
        legend: {
          data: ['行业供给数','行业需求数'],
          right:10,
          top:0,
          itemWidth: 10,
          itemHeight: 10,
          textStyle:{
            color:'#fff'
          }
        },
        xAxis: {
          data: ['⽣活服务/零售','餐饮','IT互联⽹技术','电⼦/通信','产品','运营/客服','销售','⼈事/⾏政','财务/审计/税务','⽣产制造','设计','房地产/建筑','影视/传媒','市场/公关/广告','供应链/物流','采购/贸易','医疗健康','⾦融','咨询/翻译/法律','农业/环保','⾼级管理','其他'],
          axisLabel: {
            // rotate:30,
            textStyle: {
              color: '#fff',
              fontSize: '11'
            },
            interval: 0,
            formatter: function (value) {
              var ret = '';
              var maxLength = 4;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = '';
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          },
          axisTick: {
            //x轴刻度相关设置
            alignWithLabel: true,
          },
        },
        yAxis: {
          // minInterval:1000,
          min:0,
          nameTextStyle:{
            color:'#fff',
            fontSize:14
          },
          splitLine: {//分割线配置
            show:true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
            }
          }
        },
        series: [{
          type: 'bar',
          // barGap:'30%',
          name:'行业供给数',
          data: [134, 242, 245, 365, 456, 735, 435, 354, 456, 354, 654, 527, 120, 540, 400, 575, 435, 314, 456, 354],

          label: {
            show: true,
            position: 'top',
            color:'#fff'
          },
          barWidth: 10,
          barCategoryGap: '30%',
          itemStyle: {
            normal: {
              barBorderRadius:[15, 15, 15, 15],
              color:new this.$echarts.graphic.LinearGradient(0,1,0,0,[{
                offset:0,
                color:'#2196FE'
              },{
                offset:1,
                color:'#03CEF6'
              }])
            }
          }
        },
          {
            type: 'bar',
            name:'行业需求数',
            data: [134, 242, 245, 365, 456, 735, 435, 354, 4, 42, 654, 527, 42, 52, 400, 575, 348, 24, 43, 421],

            label: {
              show: true,
              position: 'top',
              color:'#fff'
            },
            barWidth: 10,
            barCategoryGap: '30%',
            barGap:'180%',
            itemStyle: {
              normal: {
                barBorderRadius:[15, 15, 15, 15],
                color:new this.$echarts.graphic.LinearGradient(0,1,0,0,[{
                  offset:0,
                  color:'#46E6A2'
                },{
                  offset:1,
                  color:'#F4F783'
                }])
              }
            }
          },
        ]
      };
      // getSupplyAndDemandIndustries().then((res)=>{
      //   if(res.code===200){
      //     const data=res.data
      //     option.xAxis.data=data.strings;
      //     option.series[0].data=data.arr2;
      //     option.series[1].data=data.arr;
      myCharts.hideLoading();
      myCharts.setOption(option)
      // }
      // })
    },
    checkPermi,
    //控制长文本显示和收起
    showMore (row, flag) {
      this.$set(row,'show',flag)
    },
    // onchangeIsShow(row) {
    //   systemAdminApi.updateClueApi({id: row.id, status: row.status}).then(async () => {
    //     this.$message.success('修改成功');
    //     this.handleGetAdminList()
    //   }).catch(()=>{
    //     row.status = !row.status
    //   })
    // },
    onchangeIsShow(row){
      updateClueApi({id : row.id,clue:row.clue}).then(res => {
        this.$message.success('修改成功')
      }).catch(()=>{
        row.record = !row.record
      })
    },

    //图片上传有关
    onBeforeUpload(file) {
      const isIMAGE = file.type === 'image/jpg'||'image/gif'||'image/png';
      const isLt1M = file.size / 1024 / 1024 < 10;


      if (!isIMAGE) {
        this.$message.error('上传文件只能是jpg、png或gif格式!');
      }
      if (!isLt1M) {
        this.$message.error('上传文件大小不能超过 10MB!');
      }
      return isIMAGE && isLt1M;
    },
    // 上传
    handleUploadForm(param) {
      const formData = new FormData();
      formData.append("file", param.file);
      let loading = this.$loading({
        lock: true,
        text: "上传中，请稍候...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      systemSetting.fileImageApi(formData).then((res) => {
        //图片上传接口 后期调用
        this.dealDynamicValidateForm.resultUrl.push(res)

        loading.close();
        this.$message.success("上传成功");
      })
        .catch((res) => {
          loading.close();
        });
    },
    // 选取图片后自动回调，里面可以获取到文件
    imgSaveToUrl(event) {
      // 也可以用file
      this.localFile = event.raw; // 或者 this.localFile=file.raw

      // 转换操作可以不放到这个函数里面，
      // 因为这个函数会被多次触发，上传时触发，上传成功也触发
      let reader = new FileReader();
      reader.readAsDataURL(this.localFile); // 这里也可以直接写参数event.raw

      // 转换成功后的操作，reader.result即为转换后的DataURL ，
      // 它不需要自己定义，你可以console.integralLog(reader.result)看一下
      reader.onload = () => {
        //console.integralLog(reader.result)
      };

      /* 另外一种本地预览方法 */

      let URL = window.URL || window.webkitURL;
      this.dialogImageUrl = URL.createObjectURL(event.raw);
      // 转换后的地址为 blob:http://xxx/7bf54338-74bb-47b9-9a7f-7a7093c716b5
    },

    handleGetSelectDepList() {
      const _pram = {
        page: 1,
        limit: 1000,
      }
      computerApi.comList(_pram).then(res => {
        this.selectDepList = res;
      })
    },

    initTermList() {
      /*const _pram = {
        page: 1,
        limit: this.constants.page.limit[4],
      }*/
      categoryApi.categoryTermList().then(res => {
        this.termList = res;
      })
    },
    initTypeList(){
      this.loading = true
      categoryApi.categoryElcAccountList().then(data => {
        //let data = this.constants.staticTypeList
        this.typeList = data
        this.loading = false
      }).catch(()=>{
        this.loading = false
      })
    },

    handleSearch() {
      this.listPram.page = 1
      this.handleGetPhotoList()
    },
    handleSizeChange(val) {
      this.listPram.limit = val
      this.handleGetPhotoList()
    },
    handleCurrentChange(val) {
      this.listPram.page = val
      this.handleGetPhotoList()
    },
    handlerOpenDel(rowData) {
      this.$confirm('确认删除当前数据').then(() => {
        const _pram = { id: rowData.id}
        computerApi.comDel(_pram).then(data => {
          this.$message.success('删除数据成功')
          this.handleGetPhotoList()
        })
      })
    },
    handleGetPhotoList() {
      this.loading = true
      computerApi.photoList( this.listPram ).then(data => {
        this.listData = data
      }).finally(()=>{
        this.loading = false
      })
    },

    handlerOpenEdit(isCreate, editDate) {
      this.editDialogConfig.editData = editDate
      this.editDialogConfig.isCreate = isCreate
      this.editDialogConfig.visible = true
    },

    //派件
    setAssign(row){
      if(row){
        //this.userIds = row.uid
        this.dynamicValidateForm.id = row.id
        roleApi.getFormDepartment({id:this.dynamicValidateForm.id}).then(res => {
          this.departmentList = res;

          let arr = [];
          res.forEach(item=>{
            arr.push(item.id);
          })
          if(!arr.includes(Number.parseInt(this.dynamicValidateForm.depId))){
            this.$set(this.dynamicValidateForm,'depId','');
          }
        })

        let arr1 = [];
        this.termList.forEach(item=>{
          arr1.push(item.id);
        })
        if(!arr1.includes(Number.parseInt(this.dynamicValidateForm.termId))){
          this.$set(this.dynamicValidateForm,'termId','');
        }
        this.dynamicValidateForm.depId = row.depId?Number(row.depId):''
        this.dynamicValidateForm.termId = row.termId?Number(row.termId):''
      }else{
        this.dynamicValidateForm.id = 0
        this.dynamicValidateForm.depId = ''
        this.dynamicValidateForm.termId = ''
      }
      //if (this.multipleSelectionAll.length === 0 && !row) return this.$message.warning('请选择要设置的用户')
      this.dialogVisible = true
    },
    submitForm(formName) {
      // let data = [];
      // if(!this.userIds){
      //   if(this.multipleSelectionAll.length){
      //     this.multipleSelectionAll.map((item) => {
      //       data.push(item.uid)
      //     });
      //     this.userIds = data.join(',');
      //   }
      // }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          updateFormDep({termId:this.dynamicValidateForm.termId, depId: this.dynamicValidateForm.depId, id: this.dynamicValidateForm.id}).then(res => {
            this.$message.success('派件成功')
            this.loading = false
            this.Close()
            this.handleGetPhotoList()
          }).catch(() => {
            this.loading = false
          })
        } else {
          return false;
        }
      });
    },
    Close() {
      this.dialogVisible = false
      this.$refs['dynamicValidateForm'].resetFields();
    },
    Close3() {
      this.dialogVisible3 = false
      this.handleGetPhotoList()
    },
    Close4() {
      this.dialogVisible4 = false
      this.handleGetPhotoList()
    },
    Close5() {
      this.dialogVisible5 = false
      this.handleGetPhotoList()
    },
    Close6() {
      this.dialogVisible6 = false
      this.handleGetPhotoList()
    },
    Close7() {
      this.dialogVisible7 = false
      this.handleGetPhotoList()
    },
    hideListDialog(){
      this.editDialogConfig.visible = false
      this.handleGetPhotoList()

    },
    // 详情
    onDetails(id){
      this.id = id
      this.Visible = true
    },
    hideEditDialog() {
      this.Visible = false
      this.handleGetPhotoList()
    },
    resetQuery(){
      this.listPram.keyWord = ''
      this.listPram.status=null
      this.listPram.selectCrtTime=[]
      this.listPram.clue=null
      this.listPram.examine=null
      this.listPram.warningStatus =null
      this.handleGetPhotoList()
    },

    //处理
    setDeal2(row,status){
      this.dialogVisible3 = true
      this.id = row.id;
      this.adminUserId = row.adminUserId
    },
    setDeal3(row,status){
      this.dialogVisible4 = true
      this.id = row.id;
      this.examine = row.examine
      this.status1 = row.status
    },
    setDeal4(row,status){
      this.dialogVisible5 = true
      this.id = row.id;
      this.complaintId = row.id
    },
    setDeal5(row,status){
      this.dialogVisible6 = true
      this.id = row.id;
      this.reclassifyIndustryText = row.reclassifyIndustryText
    },
    setDeal6(row,status){
      this.dialogVisible7 = true
      this.id = row.id;
      this.circleStatus=row.circleStatus
    },
    setDeal(row,status){

      this.dealDynamicValidateForm.status = status;
      if(row){
        //this.userIds = row.uid
        this.dealDynamicValidateForm.adminId=row.adminId
        this.dealDynamicValidateForm.id = row.id
        this.dealDynamicValidateForm.processedId=row.processedId?row.processedId:0
        computerApi.getFormRemarkById({id:this.dealDynamicValidateForm.id}).then(res => {
          if (res){
            this.dealDynamicValidateForm.state = res.status;
            this.dealDynamicValidateForm.remark = res.remark;
            this.dealDynamicValidateForm.rejectRemark = res.rejectRemark ;
            this.dealDynamicValidateForm.handleRemark = res.handleRemark;
          }else{
            this.dealDynamicValidateForm.content = ''
            this.dealDynamicValidateForm.resultUrl = []
          }
        })
      }else{
        this.dealDynamicValidateForm.id = 0
        this.dealDynamicValidateForm.content = ''
        this.dealDynamicValidateForm.resultUrl = []
      }
      //if (this.multipleSelectionAll.length === 0 && !row) return this.$message.warning('请选择要设置的用户')
      this.dealDialogVisible = true
    },
    submitDealForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dealLoading = true
          const _pram = {
            remark:this.dealDynamicValidateForm.remark,
            handle_remark:this.dealDynamicValidateForm.handleRemark,
            reject_remark:this.dealDynamicValidateForm.rejectRemark,
            status:this.dealDynamicValidateForm.status,
            id: this.dealDynamicValidateForm.id
          }
          computerApi.updateFormRemark(_pram).then(res => {
            this.$message.success('处理成功')
            this.dealLoading = false
            this.Close1()
            this.handleGetPhotoList()
          }).catch(() => {
            this.dealLoading = false
          })
        } else {
          return false;
        }
      });
    },
    Close1() {
      this.dealDialogVisible = false
      this.$refs['dealDynamicValidateForm'].resetFields();
    },
    handleRemove (i) {
      this.dealDynamicValidateForm.resultUrl.splice(i, 1)
    },
    // 点击图片 已弃用
    /*modalPicTap (tit, num, i,status) {
      const _this = this;
      if(_this.isDisabled) return;
      this.$modalUpload(function(img) {
        if(tit==='2'&& !num){
          if(img.length>6) return this.$message.warning("最多选择6张图片！");
          if(img.length + _this.dealDynamicValidateForm.resultUrl.length > 6) return this.$message.warning("最多选择6张图片！");
          img.map((item) => {
            _this.dealDynamicValidateForm.resultUrl.push(item.attDir)
          });
        }
      },tit, 'content')
    },*/
    // 移动
    handleDragStart (e, item) {
      if(!this.isDisabled) this.dragging = item;
    },
    handleDragEnd (e, item) {
      if(!this.isDisabled) this.dragging = null
    },
    handleDragOver (e) {
      if(!this.isDisabled) e.dataTransfer.dropEffect = 'move'
    },
    handleDragEnter (e, item) {
      if(!this.isDisabled){
        e.dataTransfer.effectAllowed = 'move'
        if (item === this.dragging) {
          return
        }
        const newItems = [...this.dealDynamicValidateForm.resultUrl]
        const src = newItems.indexOf(this.dragging)
        const dst = newItems.indexOf(item)
        newItems.splice(dst, 0, ...newItems.splice(src, 1))
        this.dealDynamicValidateForm.resultUrl = newItems;
      }
    },

    //申诉
    setAppeal(row){
      if(row){
        //this.userIds = row.uid
        this.appealDynamicValidateForm.id = row.id
        computerApi.getFormAppealById({id:this.appealDynamicValidateForm.id}).then(res => {
          if (res){
            this.appealDynamicValidateForm.content = res.content;
          }else{
            this.appealDynamicValidateForm.content = ''
          }
        })
      }else{
        this.appealDynamicValidateForm.id = 0
        this.appealDynamicValidateForm.content = ''
      }
      //if (this.multipleSelectionAll.length === 0 && !row) return this.$message.warning('请选择要设置的用户')
      this.appealDialogVisible = true
    },
    submitAppealForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.appealLoading = true
          computerApi.updateFormAppeal({remark:this.appealDynamicValidateForm.content, id: this.appealDynamicValidateForm.id,status:this.appealDynamicValidateForm.status}).then(res => {
            if(this.appealDynamicValidateForm.content === ''){
              this.$message.success('取消申诉成功')
            }else{
              this.$message.success('申诉成功')
            }
            this.appealLoading = false
            this.Close2()
            this.handleGetPhotoList()
          }).catch(() => {
            this.appealLoading = false
          })
        } else {
          return false;
        }
      });
    },
    Close2() {
      this.appealDialogVisible = false
      this.$refs['appealDynamicValidateForm'].resetFields();
    },
  }
}
</script>

<style scoped lang="scss">
::v-deep{
  .el-form-item el-form-item--small{
    width: 15%;
  }
}
.traffic-img{
  width: 20px;
  height: 20px;
  border-radius: 50px;
  background-color: red;
}
.traffic-img1{
  width: 20px;
  height: 20px;
  border-radius: 50px;
  background-color: yellow;
}
.traffic-img2{
  width: 20px;
  height: 20px;
  border-radius: 50px;
  background-color: green;
}
.selWidth{
  width:150px;
}
.table .showMore{
  display:block;
  width:100%;
  word-break:keep-all;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pictrue{
  width: 120px;
  height: 120px;
  border: 1px dotted rgba(0,0,0,0.1);
  margin-right: 10px;
  position: relative;
  cursor: pointer;
  .photo-el-image{
    width: 100%;
    height: 100%;
  }
  img{
    width: 100%;
    height: 100%;
  }
  video{
    width: 100%;
    height: 100%;
  }
}
.videoBox{
  width: 300px;
  height: 180px;
  //border: 1px dotted rgba(0,0,0,0.1);
  margin-right: 10px;
  position: relative;
  cursor: pointer;
  border-radius:15px;
  img{
    width: 100%;
    height: 100%;
  }
  video{
    width: 100%;
    height: 100%;
    border-radius:15px;
  }
}
.btndel{
  position: absolute;
  z-index: 1;
  width :20px !important;
  height: 20px !important;
  font-size:20px;
  left: 100px;
  top: -2px;
}
.video-btndel{
  left: 282px;
  top: 1px;
}
.tips{
  color: #c0c4cc;
  font-size:14px;
}
</style>
